﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Spock Pock</title>
    <link href="index.css" type="text/css" rel="stylesheet">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.min.css" />
</head>
<body>
<div class="game-container">
    <!-- Header -->
    <div class="header">
        <h1>Rock Paper Scissors Lizard Spock</h1>
    </div>

    <!-- Player Container -->
    <div class="player-controls" id="player">
        <h2>You - <span id="playerScore">0</span>
            <span class="choice" id="playerChoice"> --- Choice</span>
        </h2>
        <i class="far fa-hand-rock" title="Rock" id="playerRock" onclick="select('rock')"></i>
        <i class="far fa-hand-paper selected"  title="Paper" id="playerPaper" onclick="select('paper')"></i>
        <i class="far fa-hand-scissors" title="Scissors" id="playerScissors" onclick="select('scissors')"></i>
        <i class="far fa-hand-lizard" title="Lizard" id="playerLizard" onclick="select('lizard')"></i>
        <i class="far fa-hand-spock" title="Spock" id="playerSpock" onclick="select('spock')"></i>
    </div>

    <!-- Computer Container -->
    <div class="player-controls" id="computer">
        <h2>You - <span id="computerScore">0</span>
            <span class="choice" id="computerChoice"> --- Choice</span>
        </h2>
        <i class="far fa-hand-rock" title="Rock" id="computerRock"></i>
        <i class="far fa-hand-paper" title="Paper" id="computerPaper"></i>
        <i class="far fa-hand-scissors" title="Scissors" id="computerScissors"></i>
        <i class="far fa-hand-lizard" title="Lizard" id="computerLizard"></i>
        <i class="far fa-hand-spock" title="Spock" id="computerSpock"></i>
    </div>

    <!-- Reset Icon -->
    <i class="fas fa-sync-alt reset-icon" title="Reset" onclick="resetAll()"></i>
    <!-- Results Text -->
    <div class="result-container">
        <h3 class="result-text" id="resultText">
            You Won!
        </h3>
    </div>
</div>



<!-- Scripts -->
<script type="text/javascript" src="index.js"></script>
</body>
</html>